/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = 'lilililili'
function bookList() {
  axios({
    url: 'https://hmajax.itheima.net/api/books',
    params: {
      creator
    }
  }).then(result => {
    // console.log(result.data.data);
    const list = result.data.data

    const htmlStr = list.map((items, index) => {
      const { bookname, author, publisher, id } = items
      // console.log(items);
      return `<tr>
      <td>${index + 1}</td>
      <td>${bookname}</td>
      <td>${author}</td>
      <td>${publisher}</td>
      <td data-id=${id}>
        <span class="del" >删除</span>
        <span class="edit">编辑</span>
      </td>
    </tr>`
    }).join('')
    // console.log(htmlStr);
    document.querySelector('.list').innerHTML = htmlStr
  })
}
bookList()
/**
 * 目标2：新增图书
 *  2.1 弹框（显示&隐藏）
 *  2.2 收集数据&提交保存
 *  2.3 刷新-图书列表
 */
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
document.querySelector('.add-btn').addEventListener('click', () => {
  const form = document.querySelector('.add-form')
  const addform = serialize(form, { hash: true, empty: true })
  // console.log(addform);
  axios({
    url: 'https://hmajax.itheima.net/api/books',
    method: 'post',
    data: {
      ...addform,
      creator
    }
  }).then(result => {
    // console.log(result);
    bookList()
    form.reset()
    addModal.hide()
  })
})

/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */
document.querySelector('.list').addEventListener('click', e => {
  // console.log(e.target.classList);
  if (e.target.classList.contains('del')) {
    const theId = e.target.parentNode.dataset.id
    // console.log(theId);
    axios({
      url: `https://hmajax.itheima.net/api/books/${theId}`,
      method: 'delete',
    }).then(result => {
      bookList()
    })
  }
})

/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */
// 4.1 编辑弹框->显示
const editForm = document.querySelector('.edit-modal')
const edit = new bootstrap.Modal(editForm)
document.querySelector('.list').addEventListener('click', (e) => {
  if (e.target.classList.contains('edit')) {
    const theId = e.target.parentNode.dataset.id
    console.log(theId);
    axios({
      url: `https://hmajax.itheima.net/api/books/${theId}`,
    }).then(result => {
      console.log(result.data.data);
      const bookObj = result.data.data
      // document.querySelector('.edit-form .bookname').value = bookObj.bookname
      const keys = Object.keys(bookObj)
      keys.forEach((key) => {
        // console.log(key);
        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
        // console.log(bookObj[key]);
      })
    })
    edit.show()
  }

})

// 4.2 编辑弹框->隐藏
document.querySelector('.edit-btn').addEventListener('click', () => {
  // console.log('编辑图书');
  // if (e.target.classList.contains('edit')) {
  //   console.log('编辑图书');
  const editForm = document.querySelector('.edit-form')
  const form = serialize(editForm, { hash: true, empty: true })
  console.log(form);
  const { id, bookname, author, publisher } = form
  axios({
    url: `https://hmajax.itheima.net/api/books/${id}`,
    method: 'PUT',
    data: {
      bookname,
      author,
      publisher,
      creator
    }
  }).then(() => {
    bookList()
    edit.hide()
  })
  // }

})

